<template>
    <div class="fillcontain">
        <nav-header></nav-header>
        <div class="visitorpie">
            <div id="visitorpie" class="" style="width: 45%;height:450px;float: left;"></div>
            <div id="rightVisitorpie" class="" style="width: 45%;height:450px;float: right;"></div>
            <div id="userChart" class="" style="width: 90%;height:450px;float: left;"></div>
        </div>
    </div>
</template>

<script>
import NavHeader from '@/components/header.vue';
import echarts from 'echarts/lib/echarts';
    // 引入柱状图
import 'echarts/lib/chart/pie';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

export default {
    name: 'Page',
    data () {
        return {
            
        }
    },
    mounted(){
        // this.myChart = echarts.init(document.getElementById('visitorpie'));
        this.initData();
    },
    created () {

    },
    methods: {
        initData(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('visitorpie'));
            myChart.setOption({
                title: { text: '近期订单数量',x:'center' },
                tooltip: {},
                xAxis: {
                    data: ["本周","上一周","上二周","上三周","上四周"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10]
                }]
            });

            let rightChart = this.$echarts.init(document.getElementById('rightVisitorpie'));
            rightChart.setOption({
                title : {
                    text: '快啊用户访问来源',
                    subtext: '仅供参考',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:[
                            {value:335, name:'直接访问'},
                            {value:310, name:'邮件营销'},
                            {value:234, name:'联盟广告'},
                            {value:135, name:'视频广告'},
                            {value:1548, name:'搜索引擎'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            let userChart = this.$echarts.init(document.getElementById('userChart'));
            userChart.setOption({
                title : {
                    text: '快啊用户新增人数',
                    subtext: '2017年',
                    x:'center'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line'
                }]
            });

        }
    },
    components: {
        NavHeader
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.visitorpie{
    width: 100%; box-sizing: border-box;
    padding: 30px 20px;
}
.btn_sp{
    width: 100%; height: 50px;
}
</style>
